<template>
  <div class="">
  <el-tabs v-model="activeName" class="webchatconfig" style="height: 100%">
    <el-tab-pane :label="one.name" :name="one.value" v-for="one in menu">
    </el-tab-pane>
    <div class="tip config--old">
      <span v-show="activeName !== 'customerIntention' && activeName !== 'webchatEndSession' && activeName !=='webStatus' && activeName !=='webchatSessionForm'">{{$t('config.channel.webchatGlobalMessage')}}</span>
      <span v-show="activeName === 'customerIntention'">{{$t('config.channel.intentionMessage')}}</span>
      <span v-show="activeName === 'webchatEndSession'">
        {{$t('configLazyLoad.webimClient.tip')}}<br>
        {{$t('configLazyLoad.channel.endSessionSetTip001')}}<br>
        {{$t('configLazyLoad.channel.endSessionSetTip002')}}<br>
        {{$t('configLazyLoad.channel.endSessionSetTip003')}}
      </span>
      <span v-show="activeName === 'webStatus'">
        {{$t('configLazyLoad.webimClient.tip')}}<br>
        {{$t('configLazyLoad.channel.webStatusTip001')}}<br>
        {{$t('configLazyLoad.channel.webStatusTip002')}}<br>
        {{$t('configLazyLoad.channel.webStatusTip003')}}<br>
      </span>
      <span v-show="activeName === 'webchatSessionForm'">
        {{$t('configLazyLoad.webimClient.tip')}}<br>
        {{$t('configLazyLoad.channel.webchatSessionForm001')}}<br>
        {{$t('configLazyLoad.channel.webchatSessionForm002')}}
      </span>
    </div>
    <keep-alive>
      <component :is="activeName" class="content" :dataType="'channelSet'"></component>
    </keep-alive>
  </el-tabs>
  </div>
</template>
<script>
  import importTask from './importTask.vue'
  import forbiddenChatCue from './forbiddenChatCue.vue'
  import webchatAgentClient from './webchatAgentClient.vue'
  import dataStatistics from './dataStatistics.vue'
  import quickReplyMain from './quickReplyMain.vue'
  import satisfied from './satisfied.vue'
  import webchatEndSession from './webchatEndSession.vue'
  import blackList from './blackList.vue'
  import webimClient from './webimClient.vue'
  import webStatus from './webStatusConfig.vue'
  import webchatSessionForm from './webchatSessionForm.vue'
  import customerIntention from './customerIntention.vue'
  export default {
    name: 'ChannelSkillGroup',
    data () {
      return {
        activeName: 'webchatEndSession',
        menu: [
          {name: this.$t('configLazyLoad.channel.webchatEndSession'), value: 'webchatEndSession'},
          {name: this.$t('configLazyLoad.channel.satisfied'), value: 'satisfied'},
          {name: this.$t('configLazyLoad.channel.quickReplyMain'), value: 'quickReplyMain'},
          {name: this.$t('configLazyLoad.channel.blackList'), value: 'blackList'},
          {name: this.$t('configLazyLoad.channel.customerIntention'), value: 'customerIntention'},
          {name: this.$t('config.channel.forbiddenChatCue'), value: 'forbiddenChatCue'},
          {name: this.$t('config.channel.webchatAgentClient'), value: 'webchatAgentClient'},
          {name: this.$t('config.channel.dataStatistics'), value: 'dataStatistics'},
          {name: this.$t('configLazyLoad.channel.webimClient'), value: 'webimClient'},
          {name: this.$t('config.channel.webStatusConfig'), value: 'webStatus'},
          {name: this.$t('config.channel.sessionForm'), value: 'webchatSessionForm'},
          {name: this.$t('config.channel.importTaskList'), value: 'importTask'}
        ]
      }
    },
    components: {
      forbiddenChatCue,
      webchatAgentClient,
      dataStatistics,
      quickReplyMain,
      satisfied,
      webchatEndSession,
      blackList,
      webimClient,
      customerIntention,
      webStatus,
      webchatSessionForm,
      importTask
    },
    computed: {
    },
    methods: {
      changeMenu (value) {
        this.activeName = value
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .tip
    font-size 12px
    padding 10px
    color $c-prompt
    background-color #f4f5f9
    border-bottom 1px solid #cccccc
  .content
    box-sizing border-box
    height calc(100% - 73px)
    overflow-y auto
</style>
